<?xml version="1.0" encoding="UTF-8"?>
 <!DOCTYPE html PUBLIC  "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 <meta name="keywords" content="W3C SVG 1.1 Test Suite testsuite mobile"/>
 <meta name="description" content="W3C SVG 1.1 Test Suite"/>
 <title>
SVG 1.1 test:pservers-grad-09-b </title>
 <style type="text/css">
 <!--
 body { font-family: "Lucida Grande", verdana, helvetica, sans-serif; line-height: 1.3; text-align: left; margin-top: 0; margin-bottom: 0 }
 .pageTitle { line-height: 1.5; font-weight: bold; margin-bottom: 1em;}
 .pageSubTitle  { color: blue; font-size: 200%; font-weight: bold }
 .openChapter { color: blue; line-height: 1.3; font-weight: bold }
 .openSection { color: blue; line-height: 125%; font-weight: bold }
 .info { color: black; line-height: 1.2; font-size: 90%; }
 p { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
 .linkbar { text-align: center; margin: 1em 1em 0.25em 1em;}
 blockquote { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
 .opscript {margin-left: 3%; margin-right: 3%; }
 .opscript p { margin-top: 0.7em}
 .navbar {background: black; color: white; font-weight: bold}
 -->
 </style>
 </head>
 <body class="bodytext">

	<div class="linkbar"> 
<p>
<a href="full-pservers-grad-09-b.html">Full version</a>, <a href="basic-pservers-grad-09-b.html">Basic version</a></p>
<p>Specification link: <a target="spec" href="http://www.w3.org/TR/SVG11/pservers.html#Gradients">13.2 Gradients</a></p>
 <p>
				<a href="basic-pservers-grad-08-b.html">pservers-grad-08-b ←</a> 
				<a href="basic-index.html">index</a>
				<a href="basic-pservers-grad-10-b.html">→ pservers-grad-10-b</a>
						</p></div>

	<table align="center" border="0" cellspacing="0" cellpadding="10">
		<tr>
			<td align="center" colspan="3">
				<table border="0" cellpadding="8">
					<tr>
						<td align="center" colspan="2" class="pageTitle">
							<h1>pservers-grad-09-b</h1>
						</td>
					</tr>
					<tr  class="navbar">
						<td align="center">
							SVG Image
						</td>
						<td align="center">
							PNG Image
						</td>
					</tr>
					<tr>
						<td align="right">
   	    		  			
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
            codebase="" id="mySVGViewerObj" width=160 height=120>
    <param name=movie value="../SvgViewer.swf">
    <param name="FlashVars" value="sourceType=url_svg&svgURL=../svggen/pservers-grad-09-b.svg">
    <param name="wmode" value="transparent">
    <embed play=false name="mySVGViewerObj" 
	    src="../SvgViewer.swf" quality=high wmode="transparent"
	    width=160 height=120 type="application/x-shockwave-flash"
	    FlashVars="sourceType=url_svg&svgURL=../svggen/pservers-grad-09-b.svg">
    </embed >
</object>
						</td>
						<td align="left">
							<img alt="raster image of pservers-grad-09-b" src="../png/basic-pservers-grad-09-b.png" width="160" height="120"/>
						</td>
					</tr>
				</table>
			</td>
		</tr>
	</table>

               
<div class="opscript">
			<p>
				Test that the viewer can handle the gradientUnits attribute on linear gradients.
				It tests the following values of gradientUnits : default (userSpace), objectBoundingBox,
				and userSpaceOnUse.
			</p>
			<p>
				From top-down the appearance of objects is as follows.
			</p>
			<p>
				The first rectangle uses the default attributes on the linearGradient element. 
				Therefore the linear gradient should default to objectBoundingBox. It should appear
				from the left edge of therectangle (blue) to the right edge of the rectangle (red). 
				The rectangle is smaller than the viewport, because a previous version of the SVG spec had the default value be 'viewport'.
				The test fails if only a portion of the gradient is shown.
			</p>
			<p>
				The next rectangle uses gradientUnits=objectBoundingBox. The linear gradient should 
				travel from blue (top) to red (bottom).
			</p>
			<p>
				The last rectangle uses gradientUnits=userSpaceOnUse. The rectangle element is given it's
				own transformation and the gradient is assumed to be in this user space. 
				The gradient should appear as a linear gradient from red (left) to blue (right).
			</p>
			<p>
				The rendered picture should match the reference image exactly, except for possible
				variations in the labelling text (per CSS2 rules).  
			</p>

		</div>
<div class="linkbar"> <p>
				<a href="basic-pservers-grad-08-b.html">pservers-grad-08-b ←</a>
				<a href="basic-index.html">index</a>
				<a href="basic-pservers-grad-10-b.html">→ pservers-grad-10-b</a>
						</p></div>
</body>
</html>
